import React, { useState } from 'react'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from '@ant-design/icons'
import { Layout } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { Dropdown, Space, Avatar, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { connect } from 'react-redux'
import { useDispatch, useSelector } from 'react-redux';

const { Header } = Layout
function TopHeader(props) {
  // const [collapsed, setCollapsed] = useState(false)
  // 获取状态
  const {collapsed} = useSelector((state) =>( {
    collapsed: state.CollapsedReducer.isCollapsed,
  }));
  // 获取 dipatch 方法
  const dispatch = useDispatch();

  const {
    role: { roleName },
    username,
  } = JSON.parse(localStorage.getItem('xinwen-token'))

  let navigateTo = useNavigate()
  const items = [
    {
      label: roleName,
      key: '0',
    },
    {
      label: '退出',
      key: '1',
      danger: true,
    },
  ]
  const onClick = ({ key }) => {
    if (key === '1') {
      localStorage.removeItem('xinwen-token')
      navigateTo('/login')
    }
  }

  return (
    <Header
      className="site-layout-background"
      style={{
        padding: '0 16px',
        // paddingLeft: '16px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      {React.createElement(
       collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
        {
          className: 'trigger',
          // onClick: () => props.changeCollapsed(),
          onClick: () => dispatch({ type: 'change-collapsed',}),
        }
      )}
      <div>
        <Space>
          <span>欢迎{username}</span>
          <Dropdown
            menu={{
              items,
              arrow: false,
              onClick,
              // disabled:true
            }}
          >
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                <Avatar size="large" icon={<UserOutlined />} />
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
        </Space>
      </div>
    </Header>
  )
}

// const mapStateToProps = (state) => {
//   return {
//     collapsed: state.CollapsedReducer.isCollapsed,
//   }
// }
// const mapDispatchToProps =  {
//     changeCollapsed() {
//       return {
//         type: 'change-collapsed',
//       }
//     },
// }

// export default connect(mapStateToProps,mapDispatchToProps)(TopHeader)
export default TopHeader
